<template>
  <view class="p-sku">
    <view v-for="item in list" :key="item.name" class="_dl">
      <view class="_dt">{{ item.name }}</view>
      <view class="_dd">
        <view
          v-for="sku in item.value"
          :key="sku"
          :class="{'is-active': item.selected === sku}"
          class="_li"
          @click="handleChangeSku(item, sku)"
        >
          {{ sku }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PSku',
  components: {},
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    // 切换sku
    handleChangeSku(row, sku) {
      if (row.selected !== sku) {
        row.selected = sku;
        this.$emit('update:list', this.list);
        this.$emit('change');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-sku{
    ._dt{ font-size: 30px; color: $uni-color-default; padding-bottom: 20px;}
    ._dd{
      display: flex; flex-wrap: wrap;
      ._li{
        min-width: 144px;  border-radius: 10px;   color: $uni-color-default; text-align: center; padding: 18px 16px; font-size: 28px; line-height: 28px; margin-right: 30px; margin-bottom: 30px; background: $uni-bg-color-grey;
        &.is-active{ background-color: #CF0101; color: #fff;}
      }
    }
  }
</style>
